<template>
    <div class="user-chat">
        <!-- 导航栏 -->
        <van-nav-bar title="小智同学" left-arrow @click-left="$router.back()" />

        <!-- 消息列表 -->
        <!-- <van-cell-group class="message-list" ref="messageListRef">
            <van-cell
                :title="item.msg"
                v-for="(item, index) in messageList"
                :key="index"
            />
        </van-cell-group> -->
        <div class="message-list" ref="messageListRef">
            <div
                class="list-item"
                :class="{ reverse: item.userId !== user.user_id }"
                v-for="(item, index) in messageList"
                :key="index"
            >
                <!-- 头像 -->
                <van-image
                    class="avatar"
                    round
                    fit="cover"
                    src="https://img.yzcdn.cn/vant/cat.jpeg"
                />
                <div class="content-wrap">
                    <span class="content">{{ item.msg }}</span>
                </div>
            </div>
        </div>

        <!-- 发送消息 -->
        <van-cell-group class="send-message">
            <van-field
                v-model="message"
                placeholder="请输入消息"
                :border="false"
            />
            <van-button
                type="primary"
                size="small"
                class="send-btn"
                @click="onSend"
                >发送</van-button
            >
        </van-cell-group>
    </div>
</template>

<script>
import io from 'socket.io-client'
import { setItem, getItem } from '@/utils/storage'
import { mapState } from 'vuex'

export default {
    name: 'UserChat',
    components: {},
    props: {},
    data () {
        return {
            message: '',
            // websocket 通信对象
            socket: null,
            // 消息列表
            messageList: getItem('chat-messageList') || []
        }
    },
    created () {
        // 建立连接
        // const socket = io('http://ttapi.research.itcast.cn/')

        // this.socket = socket

        this.socket = io('http://ttapi.research.itcast.cn')

        this.socket.on('connect', () => {
            console.log('连接建立成功!')
        })

        // 断开连接
        this.socket.on('disconnect', () => {
            console.log('断开连接')
        })

        // 监听 message 事件，接收服务端消息
        this.socket.on('message', data => {
            this.messageList.push(data)
        })
    },
    mounted () {
        this.scrollToBottom()
    },
    methods: {
        onSend () {
            const data = {
                msg: this.message,
                timestamp: Date.now()
            }

            this.socket.emit('message', data)

            this.messageList.push(data)

            // console.log(this.messageList)

            this.message = ''
        },
        // 滚动到底部
        scrollToBottom () {
            const list = this.$refs.messageListRef
            // console.log(list)
            this.$nextTick(() => {
                list.scrollTop = list.scrollHeight
            })
            // console.log(list.scrollTop)
            // console.log(list.scrollHeight)
        }
    },
    computed: {
        ...mapState(['user'])
    },
    watch: {
        messageList () {
            setItem('chat-messageList', this.messageList)

            // 数据改变不会立即影响视图
            this.scrollToBottom()
        }
    }
}
</script>

<style scoped>
.message-list {
    position: fixed;
    left: 0;
    right: 0;
    top: 46px;
    bottom: 44px;
    overflow-y: auto;
}
.list-item {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    padding: 5px;
    margin: 5px 0;
}
.list-item .avatar {
    margin-left: 5px;
    width: 40px;
    height: 40px;
}
.list-item .content-wrap {
    padding: 5px 10px;
    border: 1px solid #eee;
    border-radius: 5px;
    background-color: #e0effb;
    display: flex;
    align-items: center;
}
.list-item .content {
    font-size: 14px;
    color: #333;
}
.send-message {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    padding: 0 10px;
}
.send-btn {
    width: 50px;
}
.reverse {
    flex-direction: unset;
}
</style>
